<template>
  <div class="classify">
    <div class="header">
      <div class="user-face"><img :src="user.headurl"></div>
      <div class="user-name">{{user.mname|| user.nickname}}</div>
    </div>
    <div class="list">
      <div class="list-per"
           v-for="(item,index) in mineList"
           @click="clickItem(item)">
        <div class="list-contain">
          <div class="contain">
            <div class="img"
                 :class="item.cls"></div>
            <div class="title">{{item.title}}</div>
          </div>
          <div class="list-contain-h"></div>
        </div>
        <div class="list-dividing-v"
             v-if="item.title && item.title.trim().length > 0"></div>
      </div>
    </div>
    <home-nav></home-nav>
  </div>
</template>

<script>
import mixins from '@/mixins'
import HomeNav from '@/components/home-nav'
export default {
  name: 'classify',
  mixins: [mixins],
  data () {
    return {
      mineList: []
    }
  },
  created () {
    this.BIND_LOADING(false)
  },
  destroyed () {
  },
  async mounted () {
    this.initList()
  },
  methods: {
    getImageBackground (img) {
      let itemImage = `@image/${img}`
      return require(itemImage)
    },
    spwanObj (title, cls, url, query) {
      this.mineList.splice(this.mineList.length, 0, {title: title, cls: cls, url: url, query: query})
    },
    initList () {
      this.spwanObj('我的客户', 'info', 'my-customer', {})
      this.spwanObj('我的订单', 'order', 'my-order', {})
      this.spwanObj('地址管理', 'address', 'address-manager', {})
      this.spwanObj('完善信息', 'edit', 'registerdetailinfo', {})
      this.spwanObj('客户订单', 'order-shop', 'customer-order', {})
      this.spwanObj('我的收益', 'money', 'my-money', {})
      this.spwanObj('我的推广', 'spread', 'my-spread', {})
    },
    clickItem (item) {
      if (item.url) {
        this.$router.push({name: item.url, query: item.query})
      }
    }
  },
  components: {
    HomeNav
  }
}
</script>


<style lang="stylus" scoped>
.temp {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.classify {
  width: 100%;
  height: 93vh;
  background: RGBA(246, 246, 246, 1);

  .header {
    background-image: url('~@image/mine-back.png');
    background-size: 100% 379px;
    width: 100%;
    height: 379px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .user-face {
      width: 150px;
      height: 150px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .user-name {
      margin-top: 18px;
      font-size: 38px;
      color: rgba(255, 255, 255, 1);
    }
  }

  .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .list-per {
      display: flex;
      width: 33.33%;
      height: 184px;
      background: white;

      .list-contain {
        width: 100%;

        .list-contain-h {
          width: 100%;
          height: 3px;
          background: RGBA(220, 220, 220, 1);
        }

        .contain {
          height: 180px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          .title {
            font-size: 26px;
            color: rgba(51, 51, 51, 1);
          }

          .img {
            margin-bottom: 19px;
            width: 49px;
            height: 50px;
            background-size: 49px 50px;
          }
        }
      }

      .list-dividing-v {
        width: 3px;
        height: 184px;
        background: RGBA(220, 220, 220, 1);
      }
    }
  }
}

.info {
  background-image: url('~@image/icon-info.png');
}

.order {
  background-image: url('~@image/icon-order.png');
}

.address {
  background-image: url('~@image/icon-address.png');
}

.edit {
  background-image: url('~@image/icon-edit.png');
}

.order-shop {
  background-image: url('~@image/icon-order-shop.png');
}

.money {
  background-image: url('~@image/icon-money.png');
}

.spread {
  background-image: url('~@image/icon-money.png');
}
</style>
